<template>
  <div class="container">
    <img src="http://piccdn.50yoga.cn/pics/public/sweet/images/recognition/banner.png" class="share-banner"/>
    <div class="pannel">
      <p class="bold-txt">本期礼品：精美瑜伽垫</p>
      <p class="com-txt">状态：<span class="active-color">23/40</span></p>
      <p class="bold-txt">领取规则：</p>
      <p class="sm-txt">分享到盆友圈或微信好友，通过您分享的链接进入的会员，系统会自动记录，满40名即可领取礼物</p>
      <button class="clear-btn receive-btn" @click="receive">领取</button>
    </div>
    <div class="divide"></div>
    <div class="pannel">
      <p class="bold-txt">好友名单<span>（23位好友）</span></p>
      <ul class="list-wrap">
        <li class="list-item" v-for="item in visitors">
          <p class="com-txt">{{item}}</p>
          <p class="light-txt">2017-01-04</p>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Share',
  data () {
    return {
      visitors: [
        '韦小宝一枚',
        '韦小宝两枚',
        '韦小宝三枚',
        '韦小宝四枚'
      ]
    }
  },
  methods: {
    receive (e) {
      console.log(e)
      this.$router.push({ name: 'Present' })
    }
  }
}
</script>
<style lang="stylus" scoped>
@import "../../common/styles/recg-com.styl";

.share-banner{
  width 100%
}
.pannel{
  position relative
  width 100%
  box-sizing border-box
  padding 1.25rem 0.9375rem
  .bold-txt{
    font-size 0.875rem
    font-weight bold
  }
  .com-txt{
    font-size 0.875rem
    margin 0.9375rem 0
  }
  .light-txt{
    font-size 0.875rem
    color $rcg_lightFont
  }
  .active-color{
    color $rcg_themeColor
  }
  .sm-txt{
    font-size 0.75rem
    color $rcg_lightFont
    margin-top 0.625rem
    line-height 1.3
  }
  .receive-btn{
    position absolute
    top 1.25rem
    right 0.9375rem
    width 3.75rem
    height 1.5625rem
    border 1px solid $rcg_themeColor
    border-radius $borderRadius
    color $rcg_themeColor
    background-color #fff
    font-size 0.8125rem
  }
  .list-wrap{
    width 100%
    .list-item{
      width 100%
      height 2.8125rem
      box-sizing border-box
      display flex
      justify-content space-between
      align-items center
      border-bottom 1px solid $rcg_lightFont
    }
  }
}
</style>


